<template>
  <section class="wrap">
    <header class="header">
      <h2 class="title">员工信息管理</h2>
      <a href="javascript:;" class="addBtn" @click="tianjia">添加</a>
    </header>
    <form class="add" v-show="show">
      <input type="text" class="name" placeholder="姓名" v-model="mingzi" />
      <label class="genderWrap">
        <input type="checkbox" class="gender" v-model="xb" />
        <div class="genderIco">
          <div class="genderInner"><span>男</span><span>女</span></div>
        </div>
      </label>
      <input
        type="number"
        class="age"
        placeholder="年龄"
        step="1"
        min="18"
        max="80"
        v-model="age"
      />
      <label class="stateWrap">
        <input type="checkbox" class="state" v-model="zt" />
        <div class="stateIco">
          <div class="stateInner"><span>在职</span><span>离职</span></div>
        </div>
      </label>
      <button type="button" class="submit" @click="luru">录入信息</button>
    </form>
    <nav class="nav">
      <a href="javascript:;">所有员工信息</a>
      <a href="javascript:;">女员工信息</a>
      <a href="javascript:;">男员工信息</a>
      <a href="javascript:;">在职员工信息</a>
      <a href="javascript:;">离职员工信息</a>
    </nav>
    <ul class="list" ref="textwz">
      <li>
        <input
          type="checkbox"
          class="qx"
          @click="qx"
          v-bind:checked="bool"
          ref="daxuan"
        />
        <span>姓名</span>
        <span>性别</span>
        <span>年龄</span>
        <span>状态</span>
        <span>操作</span>
      </li>
      <li v-for="(i, index) in arr" :key="index">
        <span>
          <input
            class="dx"
            type="checkbox"
            @click="dx"
            v-bind:checked="bool"
            ref="xiaoxuan"
          />
        </span>
        <span>{{ i.name }}</span>
        <span>{{ i.sex }}</span>
        <span>{{ i.age }}</span>
        <span>{{ i.state }}</span>
        <span>
          <a href="javascript:;" @click="shanchu(index)">删除</a>
        </span>
      </li>
    </ul>
    <p class="operate">
      <a class="delSelect" href="javascript:;" @click="scqb">删除选中项</a>
      <a class="Induction" href="javascript:;" @click="rzxz">入职选中项</a>
      <a href="javascript:;">离职选中项</a>
    </p>
  </section>
</template>

 <style>
* {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  position: relative;
  width: 600px;
  margin: 30px auto;
  font: 12px "宋体";
}

.addBtn {
  position: absolute;
  right: 0;
  top: 0;
}

input {
  margin: 0;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a:hover {
  color: #23527c;
}

a.selected {
  color: #ccc;
}

.header {
  border-bottom: 2px solid #666;
}

.title {
  text-align: center;
  font: 14px/32px "宋体";
}

.nav {
  display: flex;
  font: 12px/26px "宋体";
  justify-content: space-between;
  border-bottom: 2px solid #666;
}

.add {
  display: flex;
  height: 40px;
  align-items: center;
  font: 12px/24px "宋体";
  justify-content: space-between;
  border-bottom: 2px solid #666;
}

.name,
.age,
.submit {
  width: 80px;
  text-align: center;
  height: 24px;
  padding: 0;
  border: 1px solid #ccc;
}

.genderWrap,
.stateWrap {
  width: 44px;
  padding: 1px;
  border: 1px solid #ccc;
}

.stateWrap {
  width: 88px;
}

.gender,
.state {
  display: none;
}

.genderIco,
.stateIco {
  width: 22px;
  height: 22px;
  background: #666;
  overflow: hidden;
  transition: 0.3s;
}

.stateIco {
  width: 44px;
}

.genderInner,
.stateInner {
  transition: 0.3s;
  display: flex;
  width: 44px;
  font: 12px/22px "宋体";
  color: #fff;
}

.stateInner {
  width: 88px;
}

.genderInner span,
.stateInner span {
  margin: auto;
}

.gender:checked ~ .genderIco {
  margin-left: 22px;
}

.gender:checked ~ .genderIco .genderInner {
  margin-left: -22px;
}

.state:checked ~ .stateIco {
  margin-left: 44px;
}

.state:checked ~ .stateIco .stateInner {
  margin-left: -44px;
}

.list {
  margin: 0 auto;
  width: 90%;
}

.list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 12px/24px "宋体";
  border-bottom: 1px solid #ccc;
}

.list span {
  margin: 0 auto;
  flex: 1;
  text-align: center;
}

.list li span:nth-of-type(1) {
  width: 40px;
  flex: none;
}

.operate {
  display: flex;
  justify-content: space-around;
  font: 12px/24px "宋体";
  border-top: 2px solid #000;
}
</style>

<script>
export default {
  data() {
    return {
      show: false,
      xb: "",
      age: "",
      zt: "",
      bool: false,
      arr: [
        { name: "张三", sex: "男", age: "20", state: "在职", checked: false },
        { name: "张三", sex: "男", age: "20", state: "在职", checked: false },
      ],
      mingzi: "",
      panduan: this.bool,
      n: 0,
      jiayi: "",
      zhi: "",
      arrNew: [],
      arrNew2: [],
      checkAll: false,
      checked: false,
    };
  },
  /* i是一整个对象,index 是arr的下标 */
  methods: {
    /* 8.3上课讲的 */
    /* 点击添加显示与隐藏 */
    // tianjia() {
    //   this.show = !this.show;
    // },
    // /* 录入事件 */
    // luru() {
    //   this.arr.push({
    //     name: this.mingzi,
    //     sex: this.xb ? "女" : "男",
    //     age: this.age,
    //     state: this.zt ? "在职" : "离职",
    //   });
    // },
    // /* 删除事件 */
    // shanchu(index) {
    //   this.arr.splice(index, 1);
    // },
        /* 全选点击 */
    qx() {
      this.bool = !this.bool;
    },
    /* 单选 */
    dx(index){
      var bool = true
      this.arr.forEach(item=>{
        if(item.checked==false){
          this.checkAll=false
          bool=false
        }
      })
      this.checked=bool
    },
    // /* 删除 */
    // scqb(){
    //   this.arr = this.arr.filter(item=>{
    //     return item.checked == false
    //   })
    // }

    /* 点击添加显示与隐藏 */
    tianjia() {
      this.show = !this.show;
    },
    /* 录入事件 */
    luru() {
      this.arr.push({
        name: this.mingzi,
        sex: this.xb ? "女" : "男",
        age: this.age,
        state: this.zt ? "在职" : "离职",
      });
    },
    /* 删除事件 */
    shanchu(index) {
      this.arr.splice(index, 1);
      /* 删除后全选取消 */
      //   if(this.$refs.textwz.innerHTML==this.ulqbwz){
      //       this.$refs.daxuan.checked==false
      //   }
    },
    /* 全选点击 */
    qx() {
      this.bool = !this.bool;
      this.n = this.$refs.xiaoxuan.length;
    },
    /* 单选点击 */
    dx() {
      if (this.n < this.$refs.xiaoxuan.length) {
        this.n++;
      }
      console.log(this.n);
      if (this.$refs.xiaoxuan[this.n - 1].checked) {
        this.jiayi = this.n;
      } else {
        this.jiayi = this.n;
        this.n--;
      }
      if (this.n == this.$refs.xiaoxuan.length) {
        this.$refs.daxuan.checked = true;
      } else {
        this.$refs.daxuan.checked = false;
      }
    },
    /* 全选删除 */
    scqb() {
      this.arr = this.arr.filter((item) => {
        return item.checked == true;
      });
      console.log(this.arr);
    },
    /* 在职选择 */
    rzxz() {
      this.arr.filter((item) => {
        if (item.state == "在职") {
          item.checked = true;
          console.log(item);
        }
      });
    },
  },
};
</script>


